<!--
 * @Author: ChaiHongJun
 * @Date: 2021-07-15 09:43:50
 * @LastEditors: ChaiHongJun
 * @LastEditTime: 2021-07-15 14:51:32
 * @version: 
 * @Description: 
-->

<template>
  <div class="content-container">
    <van-nav-bar
      class="app-nav-bar"
      title="正文"
      left-arrow
      fixed
      @click-left="$router.back()"
    />

    <van-cell-group>
      <!-- 标题 -->
      <van-cell>
        <template #title>
          <h1>{{ article.title }}</h1>
        </template>
      </van-cell>
      <!-- 头像信息 -->
      <van-cell>
        <template #icon>
          <van-image round width="50" height="50" :src="article.aut_photo" />
        </template>
        <template #title>
          <p>{{ article.aut_name }}</p>
        </template>
      </van-cell>
      <!-- 正文 -->
      <van-cell>
        <template #default>
          <div class="content" v-html="article.content"></div>
        </template>
      </van-cell>
      <!-- 评论 -->
      <van-cell></van-cell>
    </van-cell-group>

    <div class="separator">正文结束</div>
  </div>
</template>

<script>
import { getArticleDetail } from "@/api/article.js";
import { Toast } from "vant";
export default {
  name: "Detail",
  data() {
    return {
      article: {},
    };
  },

  mounted() {
    this.getArticleDetail();
  },
  watch: {
    $route: "getArticleDetail",
  },

  methods: {
    async getArticleDetail() {
      let { status, data } = await getArticleDetail(this.$route.params.id);
      if (status == 200) {
        this.article = data.data;
      } else if (status == 404) {
        Toast.fail({ message: "文章不存在" });
      } else if (status == 507) {
        Toast.fail({ message: "数据库错误" });
      }
    },
  },
};
</script>


<style lang="less">
.content-container {
  h1 {
    font-size: 18px;
  }
}
</style>